<script>
import styled from 'vue-styled-components'
const StyledContainer = styled.div`
  width:200px;

  .el-menu{
    height:100%;
    border-right: solid 1px #eeeeee;
    padding-top: 10px;

    .el-menu-item{
      margin-bottom:4px;
      display: flex;
      align-items: center;

      img{
        width:14px;
        margin-right:10px;
        display:none;
      }

      &.is-active .active{
        display:block;
      }

      &:not(.is-active) img:first-child{
        display:block;
      }
    }
  }

  .el-menu-item:focus, .el-menu-item:hover{
    background-color:rgba(15,157,116,0.04);
  }

  .el-menu-item, .el-submenu__title{
    height: 42px;
    line-height: 42px;
  }
`
export default {
  data () {
    return {
      defaultActive: 'daily',
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.defaultActive = this.$route.name
    },
  },
  render () {
    return (
      <StyledContainer>
        <el-menu
          router
          default-active={this.defaultActive}
          text-color="#79828F"
          active-text-color="#0F9D7D">
          <el-menu-item index="daily">
            <img src={require('../../public/daily.svg')}/>
            <img src={require('../../public/daily_active.svg')} class="active"/>
            <span slot="title">日报</span>
          </el-menu-item>
          <el-menu-item index="monthly">
            <img src={require('../../public/monthly.svg')}/>
            <img src={require('../../public/monthly_active.svg')} class="active"/>
            <span slot="title">月报</span>
          </el-menu-item>
          <el-menu-item index="setting">
            <img src={require('../../public/setting.svg')}/>
            <img src={require('../../public/setting_active.svg')} class="active"/>
            <span slot="title">系统设置</span>
          </el-menu-item>
        </el-menu>
      </StyledContainer>
    )
  },
}
</script>
